<template>
  <view class="room">
    <!-- 头部导航 -->
    <view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999;">
      <view class="h-100 w-row-justify-between-align">
        <view class="wh-80 w-row-center" @click="routerBack()">
          <image class="wh-40" src="../../../static/gane/goBack-icon.png"></image>
        </view>
        <view class="flex1 h-100 w-row-center w-wz-conts font-36">
          <text>{{typeText[type-1]}}</text>
        </view>
        <view class="wh-80 w-row-center">
          <!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
            <image class="wh-50" src="../../../static/gane/rq.png"></image>
          </uni-datetime-picker> -->
        </view>
      </view>
    </view>
    <view class="bwh-120"></view>
    <!-- 头部导航结束 -->

    <view class="content-box padding-top-xs">
      <view class="cover-tw index-bg absolute-default absolute top-bg" v-if="issueData">
        <!-- 期数 -->
        <view class="padding-sm padding-top-xs padding-bottom-xs text-color-white number-font">
          <view class="van-row van-row--align-center disflex van-width">
            <view class="van-col van-col--10" style="font-size: 32rpx;">
              <!-- 在线: 3018人 -->
              {{issueData.next_issue}}期
            </view>
            <view class="van-col van-col--14 disflex" style="justify-content: right;">
              <view class="text-center line-height-xs fl">
								<span>
									<!-- {{endTime}} -->
									<b class="text-bold text-xs">开奖时间: {{issueData.start_time}}</b>
								</span>
              </view>
              <view class="line-height-xs fr margin-left-xs timer-box text-color-black">
                <view class="van-count-down">

                  <hbxw-count-down v-if="!timeUpShow && issueData.fp!=1 && endTime" :start="startTime"
                                   :end="endTime" :showMillisecond="true" :showDay="false" :interval="100" @end="timeUp()">
                    <template #content="{countDown}">
											<span class="text-lg" v-if="issueData.end_time.hour">
												{{countDown.hours}}
											</span>
                      <span class="text-lg">
												{{countDown.minutes}}
											</span>
                      <span class="text-lg">
												{{countDown.seconds}}
											</span>
                      <span class="text-lg" v-if="!issueData.end_time.hour">
												{{countDown.milliseconds}}
											</span>
                    </template>
                  </hbxw-count-down>
                  <div v-else-if="timeUpShow || issueData.fp==1" class="disflex">
										<span class="text-lg">
											已
										</span>
                    <span class="text-lg">
											封
										</span>
                    <span class="text-lg">
											盘
										</span>
                  </div>
                </view>
              </view>

            </view>
          </view>
        </view>

        <view class="padding-left-sm padding-right-sm text-color-white number-font">
          <view class="rel open-box padding-left-sm padding-right-sm">
            <view class="cover-tw index-bg open-bg absolute-default absolute">

            </view>

            <view class="van-row van-row--align-center open-result text-center">
              <view class="van-col van-col--7">
                <div v-if="!timeUpShow">{{issueData.issue}}期</div>
                <div v-else>{{issueData.next_issue}}期 <span style="color: #ffff00;">正在出结果</span> </div>
              </view>
              <view class="van-col van-col--17">

                <!-- 开奖 -->
                <view class="number-font text-default" v-if="!timeUpShow && issueData.number.length">
									<span v-for="(i,index) in issueData.number" :key="index">
										<ul>
											<li>
												<span v-if="index < issueData.number.length - 1"
                              class="ball cover neckB" :class="i.color">
													{{i.number >= 10 ? i.number : '0' + i.number}}
													<b>{{getNumName(i.name)}}</b>
												</span>
												<span v-else class="ball cover neckB" :class="`last-${i.color}`">
													{{i.number >= 10 ? i.number : '0' + i.number}}
													<b>{{getNumName(i.name)}}</b>
												</span>

											</li>
										</ul>
									</span>

                  <!-- <span class="ball-group">
                    <ul>
                      <li v-for="i in numberList">
                        <span class="ball cover last-red">{{i >= 10 ? i : '0' + i}}</span>
                      </li>
                    </ul>
                  </span> -->
                </view>

                <!-- 正在开奖滚动效果 -->
                <view class="number-font text-default" v-else>
									<span class="ball-group" v-for="item in 6" :key="item">
										<ul class="number-roller" :class="item > 2 ? `number-delay-${item - 2}` : ''">
											<li v-for="i in numberList">
												<span class="ball cover"
                              :class="getCol(i)">{{i >= 10 ? i : '0' + i}}</span>
											</li>
										</ul>
									</span>

                  <span class="ball-group">
										<ul class="number-roller number-delay-5">
											<li v-for="i in numberList">
												<span class="ball cover"
                              :class="`last-${getCol(i)}`">{{i >= 10 ? i : '0' + i}}</span>
											</li>
										</ul>
									</span>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="padding-sm padding-top-xs disflex padding-bottom-0 chat-user text-color-white number-font">
          <view class="van-row van-row--align-center disflex van-width">
            <view class="van-col van-col--12 rel disflex">
              <image v-if="userInfo.headimgurl" :src="userInfo.headimgurl" mode="widthFix"
                     class="radius-sm avatar fl margin-right-xs"></image>
              <image v-else src="@/static/gane/user.png" mode="widthFix"
                     class="radius-sm avatar fl margin-right-xs"></image>
              <span class="line-height-none text-bold" style="transform: translateY(4rpx);">
								余额：{{user_monye}} <br />
							</span>
              <image src="@/static/gane/0.png" mode="widthFix" class="user-ico-game"></image>
            </view>
            <view class="van-col van-col--12">
              <view class="fr wallet">
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="toIndex">首页</button>
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="routerWallet()">充值</button>
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="routerWallet()">提现</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <scroll-view scroll-y="true" class="chat-box padding-left-sm padding-right-sm padding-top-xs envelope"
                   :scroll-into-view="lastItemId">
        <view class="fl full-width" v-for="(item,index) in list" :key="index" :id="`item${index}`">
          <view class="cell packet" :class="{'cell-r' : item.uid === userInfo.uid}">
            <view class="full-width fl rel">
              <view class="avatar avatar-r">
                <view class="van-image">
                  <image :src="item.headimgurl" class="van-image__img"
                         v-if="item.headimgurl && item.uid == userInfo.uid "></image>
                  <image :src="item.headimgurl" class="van-image__img" v-else-if="item.headimgurl">
                  </image>
                  <image src="@/static/gane/kefu.jpg" class="van-image__img" v-else-if="!item.uid">
                  </image>
                  <image src="@/static/gane/user.png" class="van-image__img"
                         v-else-if="item.type!='结算报表'"></image>
                  <image src="@/static/gane/kefu.jpg" class="van-image__img" v-else>
                  </image>
                </view>
              </view>

              <view class="name name-r">
                {{item.nickname}}
                <!-- <div class="tips" v-if="item.uid == userInfo.uid">你</div> -->
              </view>

              <view class="chat-item chat-item-r"

                    v-html="item.msg"></view>

            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="chat-menu full-width text-center">
      <view class="van-row van-row--align-center" style="justify-content: space-between;">
        <view class="van-col van-col--4" @click="toRecord">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/record-icon.png" mode=""></image>
              记录
            </view>
          </button>
        </view>
        <view class="van-col van-col--4" @click="toTrend">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/trend-icon.png" mode=""></image>
              走势
            </view>
          </button>
        </view>

        <view class="van-col van-col--4" @click="openRule">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/rule-icon.png" mode=""></image>
              规则
            </view>
          </button>
        </view>

        <view class="van-col van-col--4" @click="toIm()">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/customer-icon.png" mode=""></image>
              客服
            </view>
          </button>
        </view>
        <view class="van-col van-col--4" @click="updateList">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/refresh-icon.png" mode=""></image>
              刷新
            </view>
          </button>
        </view>
      </view>
    </view>

    <view class="chat-tools">
      <view class="bar">
        <view class="quick  text-center" @click="openBetting">
          快捷<br />
          下注
        </view>
      </view>

      <view class="funbar">
        <input type="text" v-model="input" class="input" placeholder="可输入玩法点数" @confirm="defineForm()"/>
      </view>
      <view class="send text-center text-color-white" @click="defineForm">
        发送
      </view>

      <image class="keyboardIcon" src="/static/gane/keyboard-icon.png" mode="" @click="openKeyboard">
      </image>
    </view>

    <!-- 规则 -->
    <uni-popup ref="RulePopup" type="bottom" border-radius="10px 10px 0 0">
      <view class="gameDetailBox">
        <view class="padding-sm">
          <view class="padding-bottom-sm title max-height">
            【{{typeText[type-1]}}玩法介绍】
            <rich-text :nodes="desc"></rich-text>
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeRule"></image>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 快捷键盘 -->
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" class="keyboard-popup">
      <view class="betting">
        <view class="padding-sm pop-bottom">
          <view class=" padding-bottom-sm title margin-bottom-xs">
            快捷输入
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeKeyboard"></image>
          </view>

          <view class="van-row">
            <view class="keyboard-item van-col van-col--3 margin-bottom-xs"
                  v-for="(item,index) in keyboardItems" :key="index" @click="updateInput(item)">
              <span class="keybordBtn">{{item}}</span>
            </view>
          </view>
        </view>


      </view>
    </uni-popup>

    <uni-popup ref="betting" type="bottom" border-radius="10px 10px 0 0">
      <view class="betting">
        <view class="padding-sm">
          <view class=" padding-bottom-sm title">
            快捷下注
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeBet"></image>
          </view>
        </view>

        <!-- <view>
          <view class=" padding-bottom-sm title sel">
            选玩法
          </view>
        </view> -->

        <view class="van-tabs van-tabs--line margin-top-xs">
          <view class="van-tabs__wrap">
            <liuyuno-tabs :tabData="tabs" :underLineWidth="100" :activeIndex="defaultIndex"
                          @tabClick="tabClick" />
          </view>
        </view>

        <view class="items">
          <view class="item " v-for="(item,index) in tabs[defaultIndex].list" :key="index"
                @click="selItem(item)" :class="{updateItem: includesType(item.number)}">
            <view class="label">
              {{item.number}}
            </view>
            <view class="value">
              x{{item.odds}}
            </view>
          </view>
        </view>

        <view class="submit-bar">
          <view class="van-submit-bar van-safe-area-bottom">
            <view class="van-submit-bar__bar">
              <view class="van-submit-bar__text" style="text-align: left">
                共
                <span class="van-submit-bar__price-integer">{{selList.length}}</span>
                注
              </view>

              <button @click="openSubBet" :disabled="!selList.length"
                      class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">下一步</button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="subbetting" type="bottom" border-radius="10px 10px 0 0">
      <view class="betting betting-padding-500">
        <view class="padding-sm">
          <view class=" padding-bottom-sm title">
            确认下注金额
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeSubBet"></image>
          </view>
        </view>

        <view class="van-cell van-field disflex">
          <view class="van-cell__title van-field__label">
            <label for="van-field-4-input">下注金额</label>
          </view>

          <view class="van-cell__value van-field__value">
            <view class="van-field__body">
              <input id="van-field-27-input" type="number" min="1" step="1" v-model="price"
                     class="van-field__control" placeholder="请输入下注金额" />
            </view>
          </view>
        </view>

        <view class="margin-top-sm title-align">
          快速选择
        </view>

        <view class="van-row margin-top-sm">
          <view class="van-col van-col--3 margin-bottom-xs title-align" v-for="(item,index) in priceList"
                :key="index" @click="countPrice(item)">
            <view class="keybordBtn">
              {{item}}
            </view>
          </view>

          <view class="van-col van-col--3 margin-bottom-xs title-align" @click="price = null">
            <view class="keybordBtn">
              清空
            </view>
          </view>
        </view>

        <view class="submit-bar">
          <view class="van-submit-bar van-safe-area-bottom">
            <view class="van-submit-bar__bar">
              <view class="van-submit-bar__text" style="text-align: left">
                共
                <span class="van-submit-bar__price-integer">{{selList.length}}</span>
                注，投注金额<span class="van-submit-bar__price-integer">{{price || 0}}</span>元
              </view>

              <button :disabled="!price" @click="betting()"
                      class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">确认下注</button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import $H from '@/pages/common/request.js'
import hongbaoicon from '@/static/gane/hongbao.png'
import hongbaoiconN from '@/static/gane/hongbao-n.png'
export default {
  data() {
    return {
      typeText: ['极速六合彩', '香港六合彩', '新澳门六合彩'],
      hongbaoicon,
      hongbaoiconN,
      user_monye: 0,
      list: [],
      timer: null,
      lastItemId: null,
      activeShow: false,
      priceList: [10, 50, 100, 500, 1000, 5000],
      price: null,
      countdownTime: 1 * 60 * 60 * 60 * 1000,
      numberList: [],
      currentViewId: 'number-0', // 初始滚动到的目标id，先定位到0
      index: 0, // 当前显示数字的索引
      tabs: [{
        title: '猜和值',
      },
        {
          title: "猜极值",
        },
        {
          title: "猜组合",
        },
        {
          title: "猜类型",
        },
      ],
      defaultIndex: 0,

      items: [{
        label: 0,
        value: 608
      }, {
        label: 1,
        value: 608
      }, {
        label: 2,
        value: 608
      }, {
        label: 3,
        value: 608
      }, {
        label: 4,
        value: 608
      }, {
        label: 5,
        value: 608
      }, {
        label: 6,
        value: 608
      }],

      selList: [],
      pourData: [],

      keyboardItems: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '鼠', '牛', '虎', '兔', '龙', '蛇', '马',
        '羊', '猴', '鸡', '狗', '猪', '/', '空格', '清空', '发送', '←'
      ],
      input: '',
      // 开奖号码
      winningNumbers: [45, 38, 21, 36, 11, 33, 6],
      issueData: null,
      last_time: null,
      type: null,
      typeIndex: null,
      roomId: null,
      room_label: null,
      userInfo: {},
      startTime: '',
      endTime: '',
      timeUpShow: false,
      isOpenKeyboard: false,
      bet_name: 'tema',
      desc: '',
      betList: ['tema', 'texiao', 'pingteyixiao', 'caileixing','sanzhongsan', 'lianxiao'],
      Config: {},
    }
  },
  methods: {
    tabClick(e) {
      this.defaultIndex = e
      this.bet_name = this.betList[e];
      //console.log(this.bet_name,'bet_name');
      // 切换清空选择数据
      this.selList = []
      this.pourData =[];
      // console.log(e,'e')
    },
    getConfig() {
      $H.post('/app_user_get_config').then((res) => {
        if (res.code == 200) {
          this.Config = res.data
        }else{
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 倒计时结束
    timeUp() {
      console.log('倒计时结束')
      this.timeUpShow = true
    },
    openKeyboard() {
      this.isOpenKeyboard = !this.isOpenKeyboard;
      if (this.isOpenKeyboard) {
        this.$refs.popup.open()
      } else {
        this.$refs.popup.close()
      }
    },

    closeKeyboard() {
      this.$refs.popup.close()
    },

    openRule() {
      this.$refs.RulePopup.open()
    },

    closeRule() {
      this.$refs.RulePopup.close()
    },

    openBetting() {

      this.$refs.betting.open()
    },
    closeBet() {
      this.$refs.betting.close()
    },

    openSubBet() {
      this.$refs.subbetting.open()
    },

    closeSubBet() {
      this.$refs.subbetting.close()
    },

    countPrice(num) {
      this.price = Number(this.price)+ Number(num)
    },

    toIm() {
      uni.switchTab({
        url: "/pages/im/imdetails",
      });
    },

    // 快捷输入
    updateInput(item) {
      if (item === '空格') {
        this.input = this.input + ' '
      } else if (item === '清空') {
        this.input = ''
      } else if (item === '发送') {
        this.defineForm()
        // 执行提交接口
      } else if (item === '←') {
        this.input = this.input.substring(0, this.input.length - 1)
      } else {
        this.input = this.input + item
      }

    },

    // 确定发送数据
    defineForm() {
      // if (Number(this.end_time.second) < 0) {
      // 	return uni.showToast({
      // 		title: `${this.issue+1}结束中`,
      // 		duration: 1000,
      // 		icon: 'none'
      // 	});
      // }

      if (this.input == '') {
        return uni.showToast({
          title: '下单内容为空',
          duration: 1000,
          icon: 'none'
        });
      }

      let inputArray = this.input.split(" ")

      const arrval = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
        '17',
        '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33',
        '34',
        '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '鼠', '牛',
        '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪',
        '平特鼠', '平特牛', '平特虎', '平特兔', '平特龙', '平特蛇', '平特马', '平特羊', '平特猴', '平特鸡', '平特狗', '平特猪'
      ]
      const pingte = ['平特鼠', '平特牛', '平特虎', '平特兔', '平特龙', '平特蛇', '平特马', '平特羊', '平特猴', '平特鸡', '平特狗', '平特猪'];
      const texiao = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
      inputArray.forEach((value) => {
        if (value) {

          let arr0 = null;
          let arr1 = null;


          let arr = value.split(/[/.]/)
          if (arr.length == 2) {
            arr0 = arr[0];
            arr1 = arr[1];
          } else {
            let arr = value.match(/(\D*)(\d*)/);
            if (arr.length == 3) {
              arr0 = arr[1];
              arr1 = arr[2];
            } else {
              return uni.showToast({
                title: '下单规则错误',
                duration: 1000,
                icon: 'none'
              });
            }
          }

          if (isNaN(Number(arr1))) {
            return uni.showToast({
              title: '下单金额错误',
              duration: 1000,
              icon: 'none'
            });
          }

          if (arr0.trim() == "" || arr0.trim() == null) {
            return uni.showToast({
              title: '下单号码为空',
              duration: 1000,
              icon: 'none'
            });
          }



          let obj = [{
            number: arr0,
            money: arr1
          }]
          this.defaultIndex = 0
          if (pingte.includes(arr0)) {
            this.bet_name = "pingteyixiao"
            this.defaultIndex = 2
          }
          if (texiao.includes(arr0)) {
            this.bet_name = "texiao"
            this.defaultIndex = 1
          }
          if (arrval.includes(arr0)) {
            this.money = arr1
            this.submitOrder(obj, 2)
          } else {
            return uni.showToast({
              title: '下单号码错误',
              duration: 1000,
              icon: 'none'
            });
          }
        }
      })


    },

    // 选择数据
    selItem(item) {

      // this.bet_name = item.type_name
      if (this.selList.includes(item.number)) {

        this.selList = this.selList.filter(value => value != item.number)
        const key = this.selList.indexOf(item.number)
        this.pourData.splice(key, 1)
      } else {

        this.selList = this.selList.includes(item.number) ?
            this.selList.filter(value => value !== item.number) : [...this.selList, item.number];
        // console.log(this.selList,item,'this.selList')

        this.pourData.push(item)
      }

    },

    // 渲染选中数据
    includesType(id) {
      return this.selList.includes(id)
    },

    // 更新
    updateList() {
      this.list = [];
      this.getIssueData();
      this.$nextTick(() => {
        this.lastItemId = `item${this.list.length - 1}`;
      });
    },

    updateLastItemId(id) {

    },

    // 下注
    betting() {
      if (!this.price) {
        // console.log(1111)
        return uni.showToast({
          title: '请输入大于0的数字',
          duration: 1000,
          icon: 'none'
        });
      }
      let bet_array = []
      this.pourData.forEach((item) => {
        bet_array.push({
          number: item.number,
          odds: item.odds,
          money: this.price
        })
      })
      if (bet_array.length > 0) this.submitOrder(bet_array, 1)

    },

    // 提交订单
    submitOrder(bet_array, type) {
      this.showbtn = true
      let gameTypes = ['jslhc', 'xglhc', 'amlhc']
      const formData = {
        bet_type: type,
        bet_array: bet_array,
        bet_money: bet_array[0].money,
        game_type: gameTypes[this.typeIndex],
        bet_name: this.bet_name,
        room_label: this.room_label
      }
      // console.log(bet_array)
      uni.showLoading({
        title: '下单中',
        mask: false
      });
      let gameUrl = ['/lhc_betpour', '/app_xianggang_betpour', '/app_aomen_betpour'];
      let url = gameUrl[this.typeIndex];
      url = '/app_user_betpour';
      // 提交订单
      $H.post(url, formData).then((res) => {

        uni.hideLoading();
        if (res.code == 200) {

          setTimeout(() => {

            this.pourData = []
            this.selList = []
            this.price = null
            this.input = null
            this.closeBet()
            this.closeSubBet()
            this.getIssueData()
            this.getUserInfo()
          }, 1000);

        } else {
          uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });
        }

        uni.showToast({
          title: res.msg,
          duration: 1000,
          icon: 'none'
        });
      }).finally(() => {
        uni.hideLoading();
      })

    },

    toIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },

    toTrend() {
      uni.navigateTo({
        url: '/pages/game/lhc/trend?type=' + this.type
      });
    },

    // 记录
    toRecord() {
      const types = ['jslhc', 'xglhc', 'amlhc']
      // uni.navigateTo({
      // 	url: `/pages/my/record/list?index=3&game_type=${types[this.type - 1]}`
      // });
      uni.navigateTo({
        url: `/pages/my/order/order?game_type=${types[this.type - 1]}`
      });
    },

    getNumName(title) {
      const str = title;
      const parts = str.split('/');
      const valueAfter = parts[1];
      return valueAfter
    },

    // 渲染不同的球体颜色
    getCol(i) {
      const colorList = ['red', 'blue', 'green'];
      const index = Math.floor((i - 1) / 2) % colorList.length;
      return colorList[index]
    },
    // 获取开奖信息
    getIssueData() {
      const urlArr = ['/lhc_issue_data', '/app_xianggang_issue_data', '/app_aomen_issue_data']
      $H.post(urlArr[this.typeIndex], {
        type: this.type,
        last_time: this.last_time,
        room_label: this.room_label
      }).then((res) => {

        this.timeUpShow = res.data.title === '封盘中'
        if (res.code == 200 && res.data) {
          this.issueData = res.data
          this.last_time = res.data.last_time
          this.user_monye = res.data.amoney
          let pourArray = res.data.pour_array
          if(pourArray){
            pourArray.forEach((value) => {
              if (this.list.length == 0) {
                this.list.push(value)
              }
              let result = this.list.find(item => item.id == value.id)
              if (!result) {
                this.list.push(value)
              }

            })
          }

          this.$nextTick(() => {
            this.lastItemId = `item${this.list.length - 1}`
          })
          this.startTime = this.getNowDate()
          this.endTime = res.data.endTime

          // this.endTime = this.getDateFromMinutesSeconds(res.data.end_time.hour, res.data.end_time
          // 	.minute, res.data.end_time
          // 	.second)
          // console.log(this.endTime,'this.endTime')
          localStorage.setItem('isLoading', true)
          uni.hideLoading();
        }
      })
    },

    getNowDate() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      const day = String(currentDate.getDate()).padStart(2, '0');
      const hours = String(currentDate.getHours()).padStart(2, '0');
      const minutes = String(currentDate.getMinutes()).padStart(2, '0');
      const seconds = String(currentDate.getSeconds()).padStart(2, '0');
      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
    },
    getDateFromMinutesSeconds(hour = 0, minutes = 0, seconds = 0) {
      // 获取当前时间的时间戳
      const currentTime = new Date().getTime();
      // 将分秒转化为毫秒
      const timeToAdd = (minutes * 60 + seconds) * 1000;
      // 把要增加的小时数也转化为毫秒并累加到总时间里
      const hoursInMs = hour * 60 * 60 * 1000;
      const totalTimeToAdd = timeToAdd + hoursInMs;
      // 计算新的时间戳
      const newTime = currentTime + totalTimeToAdd;
      // 创建新的日期对象
      const newDate = new Date(newTime);
      // 格式化日期
      const year = newDate.getFullYear();
      const month = String(newDate.getMonth() + 1).padStart(2, '0');
      const day = String(newDate.getDate()).padStart(2, '0');
      const hours = String(newDate.getHours()).padStart(2, '0');
      const minutesValue = String(newDate.getMinutes()).padStart(2, '0');
      const secondsValue = String(newDate.getSeconds()).padStart(2, '0');
      return `${year}/${month}/${day} ${hours}:${minutesValue}:${secondsValue}`;
    },
    getUserInfo() {
      $H.post('/app_user_get_userinfo').then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data

          uni.setStorageSync('UserInfo', res.data)
        }
      })
    },
    // 获取房间赔率
    getRoomOdds() {
      const urlArr = ['/lhc_room_odds', '/app_xianggang_room_odds', '/app_aomen_room_odds']
      $H.post(urlArr[this.typeIndex], {
        type: this.type,
        room_label: this.room_label
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          if (res.data.room_odds) {
            this.gameData = res.data
            this.tabs = []

            for (let i in res.data.room_odds) {
              // console.log(res.data.room_odds[i], 'i')
              if (i != 'lianxiao' && i != 'sanzhongsan') {
                this.tabs.push({
                  title: res.data.room_odds[i].name,
                  list: res.data.room_odds[i].list
                })
              }

            }

            this.room_name = res.data.room_name
          }

          this.desc = res.data.desc
        }
      })
    },
  },
  onShow() {
    this.endTime = ""
    this.getIssueData()
    this.timer = setInterval(() => {
      this.getIssueData()

    }, 3000)
  },
  beforeCreate() {
    const isLoading = localStorage.getItem('isLoading')
    if (!isLoading) {
      uni.showLoading({
        title: '数据加载中',
        mask: true
      });
    }
  },
  onLoad(option) {
    // console.log(option, 'op')
    this.type = option.type || null;
    this.typeIndex = this.type - 1;
    // if (option.type == 3) {
    // 	this.activeShow = true;
    // }
    // this.postData.roomId = option.roomId;
    this.roomId = option.roomId;
    this.room_label = option.room_label;
    // console.log(this.querFrom.room_label, option.room_label)
    this.getIssueData()
    this.getRoomOdds()
    this.getUserInfo()
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
    localStorage.removeItem('isLoading')
  },
  onHide() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }

    localStorage.removeItem('isLoading')
  },

  created() {
    for (let i = 1; i < 50; i++) {
      this.numberList.push(i)
    }
  }
}
</script>

<style scoped lang="scss">
body {
  background-color: #f0f3ff !important;
  font-size: 3.46667vw;
  color: #535d76;
}

.cell-r {
  float: right !important;
  padding-right: 8vw !important;

  .avatar-r {
    float: right !important;
  }

  .name-r {
    display: flex;
    justify-content: right !important;
    float: left !important;
  }

  .chat-item-r {
    margin: 0 3.2vw 0 0 !important;
    float: right !important;

    &::after {
      right: -2.13333vw !important;
      left: auto !important;
    }
  }

  .small-r {
    transform: none !important;
  }
}

.keyboard-popup {
  z-index: 996 !important;
}

.pop-bottom {
  padding-bottom: 18.66667vw;
}

.room {
  .gameDetailBox {
    padding-bottom: 140rpx;
    background-color: #fff;
    font-size: 24rpx !important;
    color: #535d76;
    line-height: 50rpx;

    .title {
      position: relative;
      padding-right: 60rpx;

      .close-icon {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 0;
        margin-top: 10rpx;
        right: 0;
      }
    }
  }

  .open-bg {
    background-image: url('@/static/gane/open-bg.png') !important;
  }

  .open-result {
    height: 14.13333vw;
  }

  .number-font {
    .ball-group {
      width: 8.26667vw;
      height: 8.26667vw;
      line-height: 8.26667vw;
      font-size: 4vw;
      display: inline-block;
      color: #000;
      transform: translateY(.53333vw);
      overflow: hidden;
      position: relative;


    }

    .ball {
      width: 8.26667vw;
      height: 8.26667vw;
      line-height: 8.26667vw;
      font-size: 4vw;
      display: inline-block;
      color: #000;
      transform: translateY(0);
      position: relative;
    }

    .neckB {
      &>b {
        position: absolute;
        right: -.53333vw;
        bottom: -2.66667vw;
        font-size: 3.2vw;
        color: #fff;
        z-index: 2;
        text-shadow: 0 1px .8vw rgb(0 0 0 / 60%);
        font-weight: 800;
      }
    }

    .blue {
      background-image: url('@/static/gane/blue.png');
    }

    .red {
      background-image: url('@/static/gane/red.png');
    }

    .green {
      background-image: url('@/static/gane/green.png');
    }

    .last-blue {
      color: #fff !important;
      background-image: url('@/static/gane/last-blue.png');
    }

    .last-red {
      color: #fff !important;
      background-image: url('@/static/gane/last-red.png');
    }

    .last-green {
      color: #fff !important;
      background-image: url('@/static/gane/last-green.png');
    }

    .number-delay-1 {
      animation-delay: .3s;
    }

    .number-delay-2 {
      animation-delay: .6s;
    }

    .number-delay-3 {
      animation-delay: .9s;
    }

    .number-delay-4 {
      animation-delay: 1.2s;
    }

    .number-delay-5 {
      animation-delay: 1.5s;
    }
  }

  .timer-box {
    font-family: LcdD;

    .text-lg {
      font-size: 30rpx;
      text-indent: -.8vw;
      width: 11.2vw;
      height: 9.6vw;
      line-height: 8.53333vw;
      position: relative;
      text-align: center;
      margin-right: -1.33333vw;
      font-weight: 500;
      float: left;
      background-image: url('@/static/gane/countdown-bg.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }

  .betting-padding-500 {
    padding-bottom: 500rpx;
  }

  .betting {
    // padding-bottom: 500rpx;
    background-color: #fff;

    .items {
      height: 500rpx;
      padding-bottom: 120rpx;
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      align-content: baseline;

      .item {
        margin: 9rpx;
        text-align: center;
        color: #F4AF00;
        line-height: 1.4;
        height: 80rpx;
        border: 1px solid #F4AF00;
        border-radius: 10rpx;
        flex: 0 0 calc(25% - 24rpx);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .label {
          color: #666;
        }

        /* 每个元素占据一行宽度的25%（4个元素一行），减去 margin 所占空间 */
      }

      .updateItem {
        background-color: #F4AF00;
        color: #fff !important;

        .label {
          color: #fff !important;
        }
      }


    }

    color: #535d76;
    line-height: 50rpx;

    .keyboard-item {
      .keybordBtn {
        width: 9.33333vw;
        height: 9.33333vw;
        line-height: 9.33333vw;
        display: inline-block;
        border-radius: 1.06667vw;
        background-color: #e4e4e4;
        text-align: center;
      }
    }

    .title {
      text-align: center;
      position: relative;
      padding: 0 60rpx;
      font-size: 30rpx !important;

      .close-icon {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 0;
        margin-top: 10rpx;
        right: 0;
      }
    }

    .sel {
      &:before {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 0;
        z-index: 1;
        width: 10.66667vw;
        height: .8vw;
        background: #F4AF00;
        border-radius: .8vw;
        transform: translateX(375rpx) translateX(-50%);
        transition-duration: 0.3s;
      }
    }

    .quickItem {
      background-color: #fff !important;
      color: #F4AF00 !important;
    }

    .active {
      background-color: #F4AF00 !important;
      color: #fff !important;
    }

    .van-field__label {
      margin-bottom: 0;
    }

    .submit-bar {
      position: fixed;
      bottom: -1px;
      left: 0px;
      right: 0px;
      height: 14.93333vw;
      background-color: #fff;
      border-top: 1px solid #f4f4f4;
      z-index: 6500;

      .van-submit-bar__bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 13.33333vw;

        padding: 0 4.26667vw;
        font-size: 3.73333vw;

        .van-submit-bar__text {
          flex: 1;
          line-height: 13.33333vw;
          padding-right: 3.2vw;
          color: #323233;

        }
      }
    }
  }

  ::v-deep .uni-popup {
    z-index: 1000;
  }

  .w-row-center {
    color: #323233 !important;
    font-weight: 600;
    font-size: 4.26667vw;
  }

  .bwh-120 {
    background-color: #f0f3ff !important;
  }



  .content-box {
    height: calc(100% - 26.93333vw);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    padding-bottom: 3.2vw;
    bottom: 14.13333vw;
    top: 12.8vw;

    .chat-user {
      .avatar {
        width: 8.53333vw;
        transform: translateY(.53333vw);
        background-color: transparent;
      }
    }

    .index-bg {
      background-image: url('@/static/gane/header-bg.png');
      background-repeat: no-repeat;
      background-size: 100% auto;
      // height: 14.66667vw;
    }

    .van-button {
      padding: 0 4vw;
      height: 6.93333vw !important;
      line-height: 6.93333vw !important;
      background-color: #fffc;
      font-size: 3.2vw;
      color: #323233;
    }



    .chat-box {
      width: 100%;
      position: absolute;
      top: 42.66667vw;
      bottom: 16.8vw;
      left: 0px;
      right: 0px;
      overflow-y: scroll;
      overflow-x: hidden;

      .cell {
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 4vw;
      }
    }

    // .envelope {
    // 	top: 16vw;
    // }

    .name {
      font-size: 3.2vw;
      color: #a5a5a5;
      width: calc(100% - 15.46667vw);
      float: right;
      line-height: 5.33333vw;
    }

    .small {
      width: 11.46667vw;
      height: 4.26667vw;
      transform: translateY(.8vw);
    }

    .vip-tag {
      background-repeat: no-repeat;
      background-size: auto 100%;
      display: inline-block;
    }

    .open {
      background-color: #fce1c3 !important;

      &::after {
        color: #fce1c3 !important;
      }
    }

    .chat-item {
      font-size: 4.26667vw;
      min-width: 16vw;
      max-width: 67%;
      background-color: #fff;
      line-height: 5.8888vw;
      padding: 3.46667vw 4vw;
      border-radius: 1.6vw;
      word-wrap: break-word;
      word-break: break-all;
      margin: 0 0 0 3.2vw;
      float: left;
      position: relative;
      // min-height: 12.26667vw;

      &::after {
        color: #fff;
        content: "\25c6";
        position: absolute;
        top: 3.46667vw;
        left: -2.13333vw;
        font-size: 5.33333vw;
        line-height: 5.33333vw;
      }

      .hongbao {
        width: 12vw;
        height: 100rpx;
        float: left;
      }

      .info {
        margin-left: 14.13333vw;
        color: #fff;
        text-shadow: 0 0 1px rgba(0, 0, 0, .1);

        & span:nth-child(2) {
          float: right;
        }
      }

      .bar {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 5.86667vw;
        line-height: 5.86667vw;
        font-size: 3.2vw;
        padding: 0 2.66667vw;
        border-radius: 0 0 1.6vw 1.6vw;

        &::before {
          content: "";
          position: absolute;
          top: 0px;
          left: 2.66667vw;
          right: 2.66667vw;
          border-top: 1px solid rgba(255, 255, 255, .6)
        }

        b {
          position: relative;
          float: left;
          transform: scale(.9);
          color: #fff9;
        }

      }
    }

  }

  .chat-menu {
    position: fixed;
    right: 0px;
    bottom: 15.46667vw;
    height: 10.66667vw;
    z-index: 5;
    background-color: #f7f8fd;
    line-height: 6.4vw;
    padding-top: 1.33333vw;

    .van-button--round {
      padding: 0px 4vw;
    }

    .van-button__content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
  }

  .chat-tools {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 15.46667vw;
    z-index: 1001;
    background-color: #f7f8fd;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 998;

    .bar {
      margin-left: 3.2vw;
    }

    .quick {
      width: 11.2vw;
      height: 11.2vw;
      padding: .5vw 0 0;
      color: #678cf0;
      border: 1px solid #acbbe2;
      background: url();
      border-radius: 1.06667vw;
    }

    .funbar {
      width: 0;
      flex: 1;
      background-color: #fff;
      border-radius: 1.06667vw;
      height: 11.2vw;
      line-height: 11.2vw;
      text-align: center;
      font-size: 4.26667vw;
      margin-left: 3.2vw;

      .input {
        width: 100%;
        height: 100%;
        text-align: left;

        .input-placeholder {
          color: #969799;
        }
      }
    }

    .active {
      width: calc(100% - 32.53333vw);
    }

    .send {
      width: 140rpx;
      height: 9.06667vw;
      line-height: 9.06667vw;
      padding: 0;
      margin-top: 1.06667vw;
      background: #07c160;
      border-radius: 1.06667vw;
      margin: 0 3.2vw;
    }

    .keyboardIcon {
      width: 64rpx;
      height: 64rpx;
      margin-right: 3.2vw;
    }
  }
}

.scroll-container {
  width: 9.33333vw;
  height: 9.33333vw;
  margin: 0 auto;
  overflow: hidden;
}

::v-deep .van-tabs__wrap {
  background-color: transparent;

  ._item {
    justify-content: center !important;
    text-align: center !important;
  }
}

.number-roller {
  animation: roller 8.5s linear infinite
}

@keyframes roller {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}
</style>